<template>
  <div>
    <button id="aa" @click="
      r++;
      s++;
    ">
      {{ r }} - {{ s }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, watchEffect } from 'vue'

export default defineComponent({
  setup() {
    // const foo = ref<string>('')

    // setTimeout(() => {
    //   foo.value = 'hello world!'
    // }, 2000)

    // function bar() {
    //   console.log(foo.value);

    // }

    // // bar()

    // // 当foo有变动，watch才会触发
    // // watch(foo, bar)

    // // 可以通过watchEffect 实现 bar() + watch(foo, bar)的效果
    // watchEffect(bar)
    // flush-post 代表vue2里的$nextTick效果
    let r = ref(2);
    let s = ref(10);
    watchEffect(() => {
      console.log(r.value, s.value);
      console.log(document.querySelector('#aa') && document.querySelector('#aa').innerText);
    }, {
      flush: 'post' //pre, post, sync
    });
    return {
      r,
      s,
    };
  }
})
</script>

<style scoped>

</style>
